<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的浮动</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        li{
            list-style: none;
            float:left;
            width: 60px;
            background-color: lightpink;
            margin-right: 2px;
            text-align: center;
            padding:5px 10px;
        }
        li:hover{
            cursor:pointer;
            color: blue;
            background-color: lightyellow;
            text-decoration: underline;
            font-style: italic;
        }
        ul{
            border:1px solid red;
        }
        /*清空浮动塌陷的解决思路: */
        .clearfix:after{content:'\20';display:block;height:0;clear:both}
        .clearfix{zoom:1}
    </style>
</head>
<body>
<ul class="clearfix">
    <li>体育</li>
    <li>新闻</li>
    <li>音乐</li>
    <li>卫生</li>
    <li>教育</li>
    <li>其它</li>
</ul>
<div>hello,你好</div>
</body>
</html>